import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import styles from './index.less';
// import { useState } from 'react';

// 用于做国际化
import { useIntl, SelectLang, useNavigate } from '@umijs/max';
// import axios from 'axios';
// import { post } from '@/utils/request';
import { loginApi } from '@/api/user';

const Index = () => {
  const intl = useIntl();
  const pageTitle = intl.formatMessage({ id: 'pageTitle' });
  const usernamePh = intl.formatMessage({ id: 'usernamePh' });
  const passwordPh = intl.formatMessage({ id: 'passwordPh' });
  const rememberText = intl.formatMessage({ id: 'rememberText' });
  const loginText = intl.formatMessage({ id: 'loginText' });

  // 得到一个form实例
  const [form] = Form.useForm();

  const [messageApi, contextHolder] = message.useMessage();

  const navigate = useNavigate();

  // const [obj, setObj] = useState({
  //   username: 'zhangsan',
  // });

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const handleClick = async () => {
    const value = await form.validateFields();
    const res = await loginApi({
      adminname: value.username,
      password: value.password,
    });
    console.log(res);

    if (res) {
      messageApi.open({
        type: 'success',
        content: '登录成功',
      });
      navigate('/home');
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('adminname', res.data.adminname);
    }

    // 获取表单控件的内容
    // console.log(form.getFieldsValue());
    // console.log(form.getFieldValue('username'));
    // 检查表单控件是否都被操作过
    // console.log(form.isFieldsTouched(true));
    // 重置表单
    // form.resetFields();
    // setObj({ username: 'lisi' });
    // form.setFieldsValue({ username: 'lisi' });
    // validateFields可以做表单的校验，通过以后再去获取数据
    // form
    //   .validateFields()
    //   .then((value: { username: string; password: string }) => {
    //     loginApi({
    //       adminname: value.username,
    //       password: value.password,
    //     }).then((res) => {
    //       if (res) {
    //         messageApi.open({
    //           type: 'success',
    //           content: '登录成功',
    //         });
    //         navigate('/home');
    //       }
    //     });
    // axios
    //   .post('http://121.89.205.189:3000/admin/admin/login', {
    //     adminname: value.username,
    //     password: value.password,
    //   })
    //   .then((res: any) => {
    //     console.log(res);
    //     if (res.data.code === '200') {
    //       messageApi.open({
    //         type: 'success',
    //         content: '登录成功',
    //       });
    //       navigate('/home');
    //     } else {
    //       messageApi.open({
    //         type: 'error',
    //         content: res.data.message,
    //       });
    //     }
    //   });
    // })
    // .catch((err) => {
    //   return err;
    // });
  };

  return (
    <>
      {contextHolder}
      <SelectLang style={{ position: 'absolute', right: 10, top: 10 }} />
      <Form
        form={form}
        name="normal_login"
        // labelCol和wrapperCol类似于栅格布局，给label和表单控件分配空间
        // labelCol={{ span: 12 }}
        // wrapperCol={{ span: 12 }}
        className={styles.loginForm}
        // initialValues用于设置form的默认值的
        // initialValues={{ remember: true }}
        // initialValues={{ username: 'zhangsan' }}
        // onFinish事件会在submit按钮点击的时候触发
        onFinish={onFinish}
      >
        <h1 className={styles.h1}>{pageTitle}</h1>
        <Form.Item
          // Item上面的name属性会作为里面的表单控件绑定的属性
          name="username"
          // label="Username"
          // rules可以用于做表单校验
          rules={[
            { required: true, message: 'Please input your Username!' },
            // { max: 8, message: '太长了！' },
            // { pattern: /^1[3456789]\d{9}$/, message: '不是手机号!' },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder={usernamePh}
          />
        </Form.Item>
        <Form.Item
          name="password"
          // label="Password"
          rules={[{ required: true, message: 'Please input your Password!' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder={passwordPh}
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>{rememberText}</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            // htmlType="submit"
            className="login-form-button"
            style={{ width: '100%' }}
            onClick={handleClick}
          >
            {loginText}
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default Index;
